<template>
  <div class="showBox">
    <div id="hiddenLayer" v-show="video.show">
      <span @click="video={
        show:false,
        picSrc:undefined,
        vSrc:undefined
      }" style="display: block;position: fixed;top: 3vh;right:10vw;font-size: 1rem;color:#f5d858;text-align: right;height: 1rem;width: 1rem;cursor: pointer;" title="关闭页面">X</span>
      <video :src="video.vSrc" controls :poster="video.picSrc" autoplay></video>
    </div>
    <div class="showTitle">活动展示:</div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, i) in imgs" :key="i" @click="openVideo(i)">
          <img :src="item.pic" />
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>
<script>
import { reactive, onMounted } from 'vue'
import Swiper from 'swiper' // 引入库
import 'swiper/css/swiper.css' // 引入样式文件，注意5和6版本的样式文件不一致
import icon_right_1 from '@/assets/image/1.jpg' //引入的图片,只能引入，不能直接写路径
import icon_right_2 from '@/assets/image/2.jpg'
import icon_right_3 from '@/assets/image/3.jpg'
import icon_right_4 from '@/assets/image/4.jpg'
import icon_right_5 from '@/assets/image/5.jpg'
import icon_right_6 from '@/assets/image/6.jpg'
import icon_right_7 from '@/assets/image/7.jpg'
import axios from "axios";
export default {
  name: 'HomeSwiper',
  data(){
    return {
      mySwiper:new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        effect: 'fade', //渐变切换
        autoplay: {
          delay: 2000, //1秒切换一次
          pauseOnMouseEnter: true, //鼠标移入 轮播暂停
          playOnMouseLeave: true //鼠标移入 轮播暂停
        },
        navigation:{
          nextEl:'.swiper-button-next',
          prevEl:'.swiper-button-prev'
        }
      }),
      imgs:[
        {
          pic: icon_right_1,
          Vname:"艾情电视报道"
        },
        {
          pic: icon_right_2,
          Vname:"防艾电视报道"
        },
        {
          pic: icon_right_3,
          Vname:"防艾电视报道"
        },
        {
          pic: icon_right_4,
          Vname:"艾情电视报道"
        },
        {
          pic: icon_right_5,
          Vname:"艾情电视报道"
        },
        {
          pic: icon_right_6,
          Vname:"防艾电视报道"
        },
        {
          pic: icon_right_7,
          Vname:"艾情电视报道"
        }
      ],
      video:{
        show:false,
        picSrc:undefined,
        vSrc:undefined
      }
    }
  },
  methods:{
    openVideo(index){
      this.video.show = true
      this.video.picSrc=this.imgs[index].pic
      this.video.vSrc = "/api/player/video?name="+this.imgs[index].Vname+".mp4"
    }
  }
}
</script>
<style lang="less" scoped>
.showBox {
  margin: 20px 0;
  height: 35vh;
  border: 1px solid #f5d858;
  padding: 10px;
  .showTitle {
    margin-bottom: 5px;
    color: #fff;
    font-size: 0.375rem;
    font-weight: 900;
    font-family: monospace;
    height: 0.625rem;
    line-height: 0.625rem;
    padding-left: 0.25rem;
  }
  .swiper-container {
    width: calc(100% - 10px);
    height: 180px;
    border-style: none;
    .swiper-slide {
      width: 100% !important;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .swiper-button-next::after,.swiper-button-prev::after{
      color:#b41e1d;
    }
  }
  #hiddenLayer{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 999;
    background-color: rgba(180,30,30,.8);
    video{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      height: 60vh;
      width: 50vw;
    }
  }
}
</style>
